<!--
 * @Author: ChenCaoYang
 * @Date: 2021-05-28 22:37:44
 * @LastEditors: YaoXiaoTian
 * @LastEditTime: 2021-06-10 11:40:30
 物流管理
-->
<template>
  <div class="container">
    <h3>地址管理</h3>
    <el-divider></el-divider>
    <!-- 地址管理内容 -->
    <div class="content">
      <div v-for="(item, index) in addressData" :key="index">
        <div class="item">
          <div class="left">
            <p class="user_info">
              <b>{{ item.consigneeName }}</b>
              <b>{{ item.consigneeTele }}</b>
            </p>
            <p class="address">
              {{ item.consigneeAddress }}
            </p>
            <el-tag type="info" v-if="item.defaultStatus == 'true'"
              >默认地址</el-tag
            >
          </div>
          <div class="right">
            <el-button
              type="success"
              round
              size="medium"
              @click="setDefaultAddress(item.id)"
              >设为默认地址</el-button
            >
            <el-button
              type="warning"
              round
              size="medium"
              @click="editAddress(item)"
              >编辑</el-button
            >
          </div>
        </div>
        <el-divider></el-divider>
      </div>
      <div v-if="addressData.length == 0">
        <div class="item">
          <div class="not_data">暂无数据, 请先添加</div>
        </div>
        <el-divider></el-divider>
      </div>
      <div class="new_address">
        <el-button type="warning" round size="medium" @click="newAddress()"
          >新增地址</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import { get_data } from "@/utils/utils";
export default {
  name: "addressAdimin", //地址管理
  data() {
    return {
      userInfo: {},
      addressData: [],
    };
  },
  mounted() {
    let userInfo = get_data("userInfo");
    this.userInfo = JSON.parse(userInfo);
    this.getData();
  },
  methods: {
    getData() {
      this.$http
        .fetch(this.$apiPath.getAddress, {
          method: "get",
          params: {
            customerId: this.userInfo.id,
          },
        })
        .then((res) => {
          this.addressData = res.data;
        });
    },
    editAddress(item) {
      this.$router.push({
        path: `/order/addressEdit?type=2&id=${item.id}&person=${item.consigneeName}&tel=${item.consigneeTele}&address=${item.mapAddress}&addressInfo=${item.consigneeAddress}`,
      });
    },
    newAddress() {
      this.$router.push({
        path: "/order/addressEdit?type=1", //1 表示 新增
      });
    },
    setDefaultAddress(id) {
      let url = this.$apiPath.setDefaultAddress + `?addressId=${id}`;
      this.$http
        .fetch(url, {
          method: "post",
        })
        .then((res) => {
          if (res.code === 200) {
            this.$message.success(res.msg);
            this.getData();
          }
        });
    },
  },
};
</script>

<style scoped lang="less">
.container {
  width: 1200px;
  padding-top: 40px;
  margin: auto;
  .content {
    padding: 0 22px;
    .item {
      height: 62px;
      display: flex;
      justify-content: space-between;
      .left {
        display: flex;
        align-items: center;
      }
      .not_data {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .user_info {
        margin-right: 18px;
      }
      .address {
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        margin-right: 10px;
      }
      .right {
        display: flex;
        align-items: center;
      }
      button {
        padding: 10px 28px;
      }
    }
    .new_address {
      text-align: right;
    }
  }
}
</style>
